<template>
  <view class="cart">
    <view class="cart-body">
		<view class="" v-if="cartItems.length<=0">
			请先添加商品到购物车。。。
		</view>
      <view v-for="(item, index) in cartItems" :key="index">
        <checkbox-group class="cart-item" @change="toggleItemSelect(item.id)">
          <view class="cart-item-checkbox">
            <checkbox class="checkbox" :checked="item.selected" />
          </view>
          <view class="cart-item-info">
            <image class="cart-item-image" :src="item.image" mode="aspectFit" />
            <view class="cart-item-text">
              <view class="cart-item-desc">
                <text>{{ item.goodsName }}</text>
                <text class="cart-item-price">单价：<text class="price-cart">￥{{ item.money }}</text></text>
				<!-- <text class="cart-item-price">会员价：<text class="price-cart">￥{{ item.userMoney }}</text></text> -->
              </view>
              <view class="cart-item-quantity">数量：
                <view @click="decreaseQuantity(index)">-</view>
                <text>{{ item.quantity }}</text>
                <view @click="increaseQuantity(index)">+</view>
              </view>
            </view>

            <view class="close" v-if="item.isShow">
              <text class="close-btn" @click="deleteSelectedItems(item.id)">
                X
              </text>

            </view>
          </view>

        </checkbox-group>
      </view>
    </view>

    <view class="cart-footer">
      <view class="cart-footer-left">
        <view class="cart-all-select">
          <checkbox class="checkbox" :checked="isAllSelected" @click="toggleSelectAll" />
          <text>全选</text>
        </view>
		<text>合计: <text class="price-cart">￥{{ totalPrice }}</text></text>
        <!-- <text>合计: <text class="price-cart">￥{{ totalPrice }}</text> 会员价合计: <text class="price-cart">￥{{ totalUserPrice }}</text></text> -->
      </view>
      <view class="cart-footer-right">
        <!-- <view class="edit" @click="edit">{{ isEditing ? '取消' : '编辑' }}</view> -->
        <view class="btn" v-if="!isEditing" @click="checkout()">结算</view>
        <!-- <view class="btn" v-show="isEditing" @click="deleteSelectedItems">删除</view> -->
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        cartItems: [],
        allSelected: false,
        isEditing: false,

      };
    },
    onShow() {
      this.getCartItems();

    },
    methods: {

      //编辑按钮
      edit() {
        this.isEditing = !this.isEditing;
        // 如果退出编辑模式，删除选中的商品项
        if (!this.isEditing) {
          this.cartItems.forEach(item => {
            this.$set(item, 'selected', false);
          });
        }
      },
      deleteSelectedItems(index) {
        this.cartItems = this.cartItems.filter(item => item.id !== index);
        this.updateAllSelected();
        uni.setStorageSync('cartItems', this.cartItems);
      },
      getCartItems() {
        this.allSelected = false;
        // this.isEditing = false;
        this.cartItems = uni.getStorageSync('cartItems') || [];
        this.cartItems.forEach(item => {
          delete item.isShow;
          this.$set(item, 'selected', false); // 使用 this.$set 添加响应式属性
        });

      },
      toggleItemSelect(index) {
        const itemIndex = this.cartItems.findIndex(item => item.id === index);
        if (itemIndex !== -1) {
          this.$set(this.cartItems, itemIndex, {
            ...this.cartItems[itemIndex],
            selected: !this.cartItems[itemIndex].selected,
            isShow: !this.cartItems[itemIndex].isShow,
          });
          this.updateAllSelected();
        }
      },
      toggleSelectAll() {
        this.allSelected = !this.allSelected;
        this.cartItems.forEach((item, index) => {
          this.$set(item, 'isShow', this.allSelected)
          this.$set(item, 'selected', this.allSelected);
        });
        this.updateAllSelected();
      },
      updateAllSelected() {
        this.allSelected = this.cartItems.every(item => item.selected);
      },
      increaseQuantity(index) {
        if (this.cartItems[index].quantity < 99) {
          this.cartItems[index].quantity += 1;

        }
        uni.setStorageSync('cartItems', this.cartItems)
      },
      decreaseQuantity(index) {
        if (this.cartItems[index].quantity > 1) {
          this.cartItems[index].quantity -= 1;
        }
        uni.setStorageSync('cartItems', this.cartItems)
      },
      checkout() {
        //定义数组
        let selectedItems = [];
        let unselectedItems = [];
        let orderItems = uni.getStorageSync('orderItems') || [];

        this.cartItems.forEach(item => {
          if (item.selected) {
            item.state = 0;
            selectedItems.push(item);
            orderItems.push(item);

          } else {
            unselectedItems.push(item);
          }
        });

        uni.setStorageSync('selectedItems', selectedItems)
        uni.setStorageSync('cartItems', unselectedItems)
        uni.setStorageSync('orderItems', orderItems)


        //  console.log(selectedItems.length);
        if (selectedItems.length <= 0) {
          return;
        } else {
          uni.navigateTo({
            url: '/pages/cartCheCkout/cartCheCkout',
            success: res => {},
            fail: () => {},
            complete: () => {}
          });
        }

      }
    },
    computed: {
      totalPrice() {
        return this.cartItems
          .filter(item => item.selected)
          .reduce((total, item) => total + item.money * item.quantity, 0);
      },
	  totalUserPrice(){
		  return this.cartItems
		    .filter(item => item.selected)
		    .reduce((total, item) => total + item.userMoney * item.quantity, 0);
	  },
      isAllSelected() {
        if (this.cartItems != '') {
          return this.cartItems.every(item => item.selected);
        }

      }
    }
  };
</script>
<style>
  .cart {
    min-height: 100vh;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .cart-body {
    margin-bottom: 50px;
  }

  .cart-item {
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 10px;
    margin: 10px;
    border: 1px solid #eee;
    box-shadow: 0px 4px 8px 0px rgba(255, 105, 180, 0.1),
      0px -4px 8px 0px rgba(255, 105, 180, 0.1),
      4px 0px 8px 0px rgba(255, 105, 180, 0.1),
      -4px 0px 8px 0px rgba(255, 105, 180, 0.1);
  }

  .cart-item-checkbox {
    margin-right: 10px;
  }

  /* 定义checkbox的样式 */
  .checkbox .uni-checkbox-input {
    border-radius: 50%;
    /* 使边框变为圆形 */
    appearance: none;
    /* 移除默认样式 */
    -webkit-appearance: none;
    /* 移除Webkit浏览器的默认样式 */
  }




  .cart-item-info {
    flex: 1;
    display: flex;
    flex-direction: row;
  }

  .cart-item-text {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-left: 8%;
  }

  .cart-item-image {
    width: 100px;
    height: 100px;
  }

  .cart-item-desc {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .cart-item-quantity {
    display: flex;
    align-items: center;
  }

  .cart-item-quantity view {
    margin: 0 5px;
    padding: 5px;
  }

  .cart-footer {
    display: flex;
    justify-content: space-between;
    background-color: #f5f5f5;
    height: 60px;
    width: 100%;
    bottom: 0;
    position: fixed;
  }

  .cart-footer-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    margin: 0px 20px;
  }

  .cart-all-select {
    display: flex;
    align-items: center;
  }

  .cart-footer-right {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 25%;
  }

  .close {
    display: flex;
    flex-direction: row;
    flex: 1;
    justify-content: flex-end;


  }

  .close-btn {
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    color: #04BE02;
    border: 0.1px solid #ff70b4;
  }

  .cart-footer-right .btn,
  .edit {
    width: 70px;
    text-align: center;
    line-height: 30px;
    height: 30px;
    border-radius: 20px;
    color: #fff;
    padding: 5px;

  }

  .btn {
    background-color: #04BE02;
  }

  .edit {
    background-color: #fff;
    color: #3b3b3b;
    border: 0.1px solid #969696;
  }

  .cart-footer-right .btn:focus,
  .cart-footer-right .btn:active {
    transform: scale(0.95);
  }

  .cart-footer-right .edit:focus,
  .cart-footer-right .edit:active {
    transform: scale(0.95);
  }

  .price-cart {
    color: #04BE02;
  }
</style>